<template>
    <div class="treeTags">
        <!-- {{this.$props.childData}} -->
        <el-row >
            <el-col :span='24' class="treeTagsOne" justify="center" type="flex" >
                  <el-col :span='8' class="treeTagsOne-l">
                      <el-tag type="" class="trigon">{{this.$props.childData.authName}}</el-tag>
                  </el-col>
                  <el-col :span='16' class="treeTagsOne-r">
                        <el-col :span="16">
                            <template v-for="(v,i) in this.$props.childData.children" >
                                <el-col :key='i' :span="24"  class="treeTagsTwo">
                                       <el-col :span="6" class="treeTagsTwo-l">
                                            <el-tag type="success" class="trigon">{{v.authName}}</el-tag>
                                       </el-col>
                                       <el-col :span='18' class="treeTagsTwo-r">
                                            <template v-for="(cv,ci) in v.children">
                                                    <el-col :span='5 ' :key='ci' :offset="3">
                                                        <el-tag 
                                                            type="warning" 
                                                            class="warning-items"  
                                                            closable 
                                                            :disable-transitions="false"
                                                            @close="handleClosable($props.slotData.id,cv.id,cv,v.children)">{{cv.authName}}</el-tag>
                                                    </el-col>
                                            </template> 
                                       </el-col>
                                </el-col>
                            </template>
                        </el-col>
                        
                  </el-col>  
            </el-col>
        </el-row>
         <!--<el-col :span='19'>
                    <tree-tags :childData='v' v-for="(v,i) in this.$props.childData.children" :key="i"/>
          </el-col> -->
    </div>
</template>
<script>
import {myMesBoxPop} from '@/utils/comm';
import {Message} from 'element-ui';
export default {
    name:'treeTags',
    props:{
        childData:{
            type:Object
        },
        slotData:{
            type:Object
        }
    },
    data() {
        return {}
    },
    methods:{
       handleClosable(roleId,rightId,currTag,currTag_f){
            const succFn=()=>{
                return new Promise((resolve,reject)=>{
                    let data={roleId,rightId}
                   /*  console.log(currTag);
                    console.log(currTag_f);
                    console.log(currTag_f.indexOf(currTag)) */
                    this.$store.dispatch('role/Acs_deleteRolesRights',data)
                        .then(res=>{
                            //console.log(res);
                             //Message.success('取消权限成功')
                             currTag_f.splice(currTag_f.indexOf(currTag),1)
                        })
                        .catch(err=>{console.log(err);}) 
                       }
                    )}
                
           const errFn=()=>{Message.info('以取消删除');}
           myMesBoxPop(succFn,errFn)
       } 
    }
}
</script>
<style lang="scss" scoped>
    .treeTags{
        border-top: 1px solid #eee;
        padding-bottom: 10px;
        &:last-of-type{
           border-bottom: 1px solid #eee; 
        }
        .treeTagsOne{
            display: flex;
            //flex-direction: column;
            align-items: center;
            .treeTagsTwo{
                display: flex;
                align-items: center;
                border-bottom: 1px solid #eee;
                padding-top: 10px;
                &:last-of-type{
                   border-bottom: 0; 
                }
                .warning-items{
                    margin-bottom: 10px;
                }
            }
        }
        .trigon{
            position: relative;
            &::after{
                position: absolute;
                content: '';
                height: 0;
                width: 0;
                right: -20px;
                top: 50%;
                transform: translateY(-50%);
                border: 5px solid transparent;
                border-left-color: #606266;
            }
        }
    }
</style>